this.BX=this.BX||{};this.BX.UI=this.BX.UI||{};(function(t,e,i,r,s,o,n){"use strict";const a={inject:["uploader"],mounted(){this.uploader.assignBrowse(this.$refs.dropArea)},computed:{dropLabel(){return s.Loc.getMessage("TILE_UPLOADER_DROP_FILES_HERE")}},template:`\n\t\t<div class="ui-tile-uploader-drop-area" ref="dropArea">\n\t\t\t<div class="ui-tile-uploader-drop-box">\n\t\t\t\t<label class="ui-tile-uploader-drop-label">{{dropLabel}}</label>\n\t\t\t\t\x3c!--<div class="ui-tile-uploader-settings"></div>--\x3e\n\t\t\t</div>\n\t\t</div>\n\t`};const l={props:{progress:{type:Number,default:0},width:{type:Number,default:45},lineSize:{type:Number,default:3},colorTrack:{type:String,default:"#eeeff0"},colorBar:{type:String,default:"#2fc6f6"},rotation:{type:Boolean,default:true}},mounted(){this.createProgressbar()},watch:{progress(){this.updateProgressbar()}},methods:{createProgressbar(){this.loader=new e.ProgressRound({width:this.width,lineSize:this.lineSize,colorBar:this.colorBar,colorTrack:this.colorTrack,rotation:this.rotation,value:this.progress,color:e.ProgressRound.Color.SUCCESS});this.loader.renderTo(this.$refs.container)},updateProgressbar(){if(!this.loader){this.createProgressbar()}this.loader.update(this.progress)}},template:`<span ref="container"></span>`};const p={props:{error:{type:[Object,String]},alignArrow:{type:Boolean,default:true},popupOptions:{type:Object,default(){return{}}}},emits:["onDestroy"],watch:{error(t){if(this.errorPopup){this.errorPopup.destroy()}this.errorPopup=this.createPopup(t);this.errorPopup.show()}},created(){this.errorPopup=null},mounted(){if(this.error){this.errorPopup=this.createPopup(this.error);this.errorPopup.show()}},beforeUnmount(){if(this.errorPopup){this.errorPopup.destroy();this.errorPopup=null}},methods:{createContent(t){if(s.Type.isStringFilled(t)){return t}else if(s.Type.isObject(t)){return t.message+"<br>"+t.description}return""},createPopup(t){const e=this.createContent(t);let r;if(this.alignArrow&&s.Type.isElementNode(this.popupOptions.bindElement)){const s=this.popupOptions.bindElement;const o=s.offsetWidth;r={cacheable:false,animation:"fading-slide",content:e,events:{onDestroy:()=>{this.$emit("onDestroy",t);this.errorPopup=null},onShow:function(t){const e=t.getTarget();e.getPopupContainer().style.display="block";const r=e.getPopupContainer().offsetWidth;const s=o/2-r/2;const n=i.Popup.getOption("angleLeftOffset")-i.Popup.getOption("angleMinTop");e.setAngle({offset:r/2-n});e.setOffset({offsetLeft:s+i.Popup.getOption("angleLeftOffset")})}}}}else{r={cacheable:false,animation:"fading-slide",content:e,events:{onDestroy:()=>{this.$emit("onDestroy",t);this.errorPopup=null}}}}const o=Object.assign({},r,this.popupOptions);return new i.Popup(o)}},template:"<span></span>"};const u={props:{name:{type:String},type:{type:String},color:{type:String},size:{type:Number,default:36}},mounted(){const t=new r.FileIcon({name:this.name,fileType:this.type,color:this.color,size:this.size});t.renderTo(this.$el)},template:"<span></span>"};const d={components:{UploadLoader:l,ErrorPopup:p,FileIconComponent:u},inject:["uploader"],props:{item:{type:Object,default:{}}},data(){return{tileId:"tile-uploader-"+s.Text.getRandom().toLowerCase(),showError:false}},computed:{FileStatus:()=>n.FileStatus,status(){if(this.item.status===n.FileStatus.UPLOADING){return this.item.progress+"%"}else if(this.item.status===n.FileStatus.LOAD_FAILED||this.item.status===n.FileStatus.UPLOAD_FAILED){return s.Loc.getMessage("TILE_UPLOADER_ERROR_STATUS")}else{return s.Loc.getMessage("TILE_UPLOADER_WAITING_STATUS")}},fileSize(){if([n.FileStatus.LOADING,n.FileStatus.LOAD_FAILED].includes(this.item.status)&&this.item.origin===n.FileOrigin.SERVER){return""}return this.item.sizeFormatted},errorPopupOptions(){const t=this.$refs.container;const e=t.offsetWidth;return{bindElement:t,darkMode:true,offsetTop:6,minWidth:e,maxWidth:500}},clampedFileName(){const t=this.item.originalName.split(".");if(t.length>1){t.pop()}const e=t.join(".");if(e.length>27){return e.substr(0,17)+"..."+e.substr(-5)}return e},menuItems(){const t=[];if(s.Type.isStringFilled(this.item.downloadUrl)){t.push({text:s.Loc.getMessage("TILE_UPLOADER_MENU_DOWNLOAD"),href:this.item.downloadUrl});t.push({text:s.Loc.getMessage("TILE_UPLOADER_MENU_REMOVE"),onclick:()=>{this.remove()}})}return t}},created(){this.menu=null},beforeUnmount(){if(this.menu){this.menu.destroy();this.menu=null}},methods:{remove(){this.uploader.removeFile(this.item.id)},handleMouseEnter(t){if(t.error){this.showError=true}},handleMouseLeave(){this.showError=false},showMenu(){if(this.menu){this.menu.destroy()}this.menu=i.MenuManager.create({id:this.tileId,bindElement:this.$refs.menu,angle:true,offsetLeft:13,minWidth:100,cacheable:false,items:this.menuItems,events:{onDestroy:()=>this.menu=null}});this.menu.show()}},template:`\n\t<transition name="ui-tile-uploader-item">\n\t\t<div\n\t\t\tclass="ui-tile-uploader-item"\n\t\t\t:class="['ui-tile-uploader-item--' + item.status, { '--image': item.isImage } ]"\n\t\t\tref="container"\n\t\t>\n\t\t\t<ErrorPopup v-if="item.error && showError" :error="item.error" :popup-options="errorPopupOptions"/>\n\t\t\t<div \n\t\t\t\tclass="ui-tile-uploader-item-content"\n\t\t\t\t@mouseenter="handleMouseEnter(item)" \n\t\t\t\t@mouseleave="handleMouseLeave(item)"\n\t\t\t>\n\t\t\t\t<div v-if="item.status !== FileStatus.COMPLETE" class="ui-tile-uploader-item-state">\n\t\t\t\t\t<div class="ui-tile-uploader-item-loader" v-if="item.status === FileStatus.UPLOADING">\n\t\t\t\t\t\t<UploadLoader :progress="item.progress" :width="20" colorTrack="#73d8f8" colorBar="#fff" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div v-else class="ui-tile-uploader-item-state-icon"></div>\n\t\t\t\t\t<div class="ui-tile-uploader-item-status">\n\t\t\t\t\t\t<div class="ui-tile-uploader-item-status-name">{{status}}</div>\n\t\t\t\t\t\t<div v-if="fileSize" class="ui-tile-uploader-item-state-desc">{{fileSize}}</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class="ui-tile-uploader-item-state-remove" @click="remove" key="aaa"></div>\n\t\t\t\t</div>\n\t\t\t\t<template v-else>\n\t\t\t\t\t<div class="ui-tile-uploader-item-remove" @click="remove" key="remove"></div>\n\t\t\t\t\t<div class="ui-tile-uploader-item-actions" key="actions">\n\t\t\t\t\t\t<div v-if="menuItems.length" class="ui-tile-uploader-item-menu" @click="showMenu" ref="menu"></div>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t\t<div class="ui-tile-uploader-item-preview">\n\t\t\t\t\t<div\n\t\t\t\t\t\tv-if="item.previewUrl"\n\t\t\t\t\t\tclass="ui-tile-uploader-item-image"\n\t\t\t\t\t\t:class="{ 'ui-tile-uploader-item-image-default': item.previewUrl === null }"\n\t\t\t\t\t\t:style="{ backgroundImage: item.previewUrl !== null ? 'url(' + item.previewUrl + ')' : '' }">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div \n\t\t\t\t\t\tv-else-if="item.name && item.status !== FileStatus.LOADING" \n\t\t\t\t\t\tclass="ui-tile-uploader-item-file-icon"\n\t\t\t\t\t>\n\t\t\t\t\t\t<FileIconComponent :name="item.extension" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div \n\t\t\t\t\t\tv-else \n\t\t\t\t\t\tclass="ui-tile-uploader-item-file-default"\n\t\t\t\t\t>\n\t\t\t\t\t\t<FileIconComponent :name="item.extension ? item.extension : '...'" :size="36" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div v-if="item.originalName" class="ui-tile-uploader-item-name-box" :title="item.originalName">\n\t\t\t\t\t<div class="ui-tile-uploader-item-name">\n\t\t\t\t\t\t<span class="ui-tile-uploader-item-name-title">{{clampedFileName}}</span>\x3c!--\n\t\t\t\t\t\t--\x3e<span v-if="item.extension" class="ui-tile-uploader-item-name-extension">.{{item.extension}}</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</transition>\n\t`};const m={components:{TileItem:d},props:{items:{type:Array,default:[]}},template:`\n\t\t<div class="ui-tile-uploader-items">\n\t\t\t<TileItem v-for="item in items" :key="item.id" :item="item" />\n\t\t</div>\n\t`};const c={directives:{drop:{beforeMount(t,e,i){function r(){e.instance.dragOver=true;t.classList.add("--drag-over")}function o(){e.instance.dragOver=false;t.classList.remove("--drag-over")}let n=null;s.Event.bind(t,"dragenter",(t=>{t.preventDefault();t.stopPropagation();n=t.target;r()}));s.Event.bind(t,"dragleave",(t=>{t.preventDefault();t.stopPropagation();if(n===t.target){o()}}));s.Event.bind(t,"drop",(t=>{o()}))},unmounted(t,e,i){e.instance.dragOver=false;s.Event.unbindAll(t,"dragenter");s.Event.unbindAll(t,"dragleave");s.Event.unbindAll(t,"drop")}}},data(){return{dragOver:false}}};const h={name:"TileWidget",extends:n.VueUploaderComponent,components:{DropArea:a,TileList:m,ErrorPopup:p},mixins:[c],data(){return{isMounted:false}},computed:{errorPopupOptions(){return{bindElement:this.$refs.container,closeIcon:true,padding:20,offsetLeft:45,angle:true,darkMode:true,bindOptions:{position:"top",forceTop:true}}}},created(){this.adapter.subscribe("Item:onAdd",(t=>{this.uploaderError=null}));this.adapter.subscribe("Item:onRemove",(t=>{this.uploaderError=null}))},mounted(){this.uploader.assignDropzone(this.$refs.container);this.isMounted=true},methods:{handlePopupDestroy(t){if(this.uploaderError===t){this.uploaderError=null}}},template:`\n\t\t<div class="ui-tile-uploader" ref="container" v-drop>\n\t\t\t<template v-if="items.length === 0">\n\t\t\t\t<DropArea />\n\t\t\t</template>\n\t\t\t<template v-else>\n\t\t\t\t<TileList :items="items"></TileList>\n\t\t\t\t<DropArea />\n\t\t\t</template>\n\t\t</div>\n\t\t<ErrorPopup\n\t\t\tv-if="uploaderError && isMounted"\n\t\t\t:alignArrow="false"\n\t\t\t:error="uploaderError"\n\t\t\t:popup-options="errorPopupOptions"\n\t\t\t@onDestroy="handlePopupDestroy"\n\t\t/>\n\t`};class f extends n.VueUploaderWidget{constructor(t,e){const i=s.Type.isPlainObject(e)?Object.assign({},e):{};super(t,i)}getRootComponent(){return h}}t.TileWidget=f;t.TileWidgetComponent=h;t.TileList=m;t.FileIcon=u;t.ErrorPopup=p;t.UploadLoader=l;t.DragOverMixin=c})(this.BX.UI.Uploader=this.BX.UI.Uploader||{},BX.UI,BX.Main,BX.UI.Icons.Generator,BX,BX.Event,BX.UI.Uploader);
//# sourceMappingURL=ui.uploader.tile-widget.bundle.map.js